<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>实时数据监控平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="$!{__beat.servletContext.contextPath}/tv-map/styles/main.css">
    <script src="$!{__beat.servletContext.contextPath}/tv-map/bower_components/modernizr/modernizr.js"></script>
    <style>
.pvbox{ padding:0 52px; background: #1b1b1b; height: 100%; display: flex; flex-direction:column;align-items:stretch;}
.todaycum{ padding:35px 0 35px 180px; position: relative; line-height: 42px;}
.todaycum strong{ font-size: 42px; color: #858585; font-weight: normal; position: absolute; left:0; top:40px; display: block;}
.todaycum strong:after{ content: ""; display: block; width: 1px; height: 30px; background: #303030; position: absolute; right:-5px; top:50%; margin-top: -15px;}
.todaycum .time{ font-size: 32px; color: #ff4700; margin-bottom: 5px;}
.todaycum .day{ font-size: 16px; color: #858585;}
.todaycum span{ display: block; line-height: 1; font-family: Tahoma;}
.pvbox .item{ background: #222; padding: 25px; margin-bottom: 10px;flex:1;}
</style>
  </head>
  <body>
    <div class="wrap">
        <div class="aside">
            <h1>流量实时数据</h1>
            <div class="city_box">
                <div class="city_bar">PC端今日热词<span>（搜索量）</span></div>
                <ul>
                    <ol>
                        <span class="order">1</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">2</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">3</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">4</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">5</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">6</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">7</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">8</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">9</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">10</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                </ul>
            </div>
            <div class="class_box">
                <div class="class_bar">M端今日热词<span>
                    （搜索量）
                </span></div>
                <ul>
                    <ol>
                        <span class="order">1</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">2</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">3</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">4</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">5</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">6</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">7</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">8</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">9</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                    <ol>
                        <span class="order">10</span>
                        <span class="name nowrap">{{北京}}</span>
                        <span class="bar"><i></i><span class="amount">{{440445}}</span></span>
                    </ol>
                </ul>
            </div>
        </div>
        <div class="main">
        <div class="pvbox">
                <div class="todaycum">
                    <strong>今日趋势</strong>
                    <span class="time">11:52:38</span>
                    <span class="day">2015年5月26日</span>
                </div>
                <div id="pv" name="PV" lineColor="#ff6921" areaColor='rgba(229,94,31,.08)' class="item"></div>
                <div id='vppv' name="VPPV" lineColor="#afa214" areaColor='rgba(153,143,31,.08)' class="item"></div>
            </div>
        </div>
    </div>
    <script src="$!{__beat.servletContext.contextPath}/bootstrap/jquery.js"></script>
<script src="$!{__beat.servletContext.contextPath}/echarts2/source/echarts.js"></script>
    <script src="$!{__beat.servletContext.contextPath}/tv-map/scripts/tv-netflow.js"></script>
    <script type="text/javascript">
    require.config({paths: {echarts: '$!{__beat.servletContext.contextPath}/echarts2/dist', tvmap: '$!{__beat.servletContext.contextPath}/tv-map/scripts'}});
        require(['tvmap/realtime_netflow'],function(obj){
            obj.start();
        });
    </script>
</body>
</html>
